<template>
  <div>
    <div class='chart' id='infoChart'></div>
  </div>
</template>
<script lang="ts">
import { getTrend, getEnumCommon } from '@/api/api'
import { inject, onMounted, reactive } from 'vue'
export default {
  data () {
    return {
    }
  },

  components: {},

  setup () {
    var $echarts:any = inject('echarts')
    var chartData:any = []

    // 创建一个对象变量
    // 创建两个数组变量
    var data:any = reactive({})
    var xData:number[] = reactive([])
    var yData:number[] = reactive([])
    var timeData:string[] = reactive([])
    // 处理数据
    function setData () {
      xData = chartData.map((v: any[]) => v[1])
      yData = chartData.map((v: any[]) => v[4])
      timeData = chartData.map((v: (string|number|Date)[]) => (new Date(v[0]).toLocaleDateString()))
    }

    function dealNumberAmount (money:any) {
      if (money && money != null) {
        money = String(money)
        var left = money.split('.')[0]
        var right = money.split('.')[1]
        right = right ? (right.length >= 2 ? '.' + right.substr(0, 2) : '.' + right + '0') : '.00'
        var temp = left.split('').reverse().join('').match(/(\d{1,3})/g)
        return (Number(money) < 0 ? '-' : '') + temp.join(',').split('').reverse().join('') + right
      } else if (money === 0) {
        return '0.00'
      } else {
        return '0.00'
      }
    }

    getEnumCommon({ enumName: 'FlowTypeEnum' }).then(res => {
      console.log(res)
    })
    onMounted(async () => {
      await getTrend({
        code: 'bitcoin',
        type: 'w'
      }).then((res: any) => {
        chartData = res
        setData()
      })
      // init初始化echarts图表
      var myChart = $echarts.init(document.getElementById('infoChart'))
      // setData()
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#fff'
            }
          }
        },
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ['line', 'bar'] },
        //     restore: { show: false },
        //     saveAsImage: { show: true }
        //   }
        // },
        // legend: {
        //   data: ['Evaporation', 'Temperature']
        // },
        xAxis: [
          {
            type: 'category',
            data: timeData,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            min: 16000,
            // max: 250,
            interval: 6000,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '',
            min: 3000000000,
            max: 12000000000,
            interval: 5000000000,
            axisLabel: {
              formatter: ''
            }
          }
        ],
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100
          }, {
            start: 0,
            end: 100
          }
        ],
        series: [
          {
            name: '价格',
            type: 'line',
            color: 'red',
            tooltip: {
              valueFormatter: function (value: number) {
                return '$' + dealNumberAmount(value)
              }
            },
            data: xData
          },
          {
            name: '交易金额',
            type: 'bar',
            yAxisIndex: 1,
            color: 'rgb(146 168 235)',
            tooltip: {
              valueFormatter: function (value: number) {
                return '$' + dealNumberAmount(value)
              }
            },
            data: yData
          }
        ]
      })
    })

    return {
      data,
      xData,
      yData,
      timeData,
      setData
    }
  }
}
</script>
<style lang='scss' scoped>
.chart {
  height: 600px;
}
h2 {
  height: .3125rem;
  color: #fff;
  line-height: .3125rem;
  font-size: .25rem;
  text-align: center;
}
</style>
